<template>
  <MainLayout>
    <div class="home-content">
      <!-- 英雄区域轮播图 -->
      <div class="hero-carousel-section">
        <el-carousel 
          :interval="5000" 
          height="600px" 
          indicator-position="none"
          arrow="hover"
          class="hero-carousel"
        >
          <el-carousel-item v-for="item in heroBanners" :key="item.id">
            <div class="hero-slide">
              <div class="hero-left">
                <div class="hero-content">
                  <div class="decorative-lines">
                    <div class="line"></div>
                    <div class="line vertical"></div>
                  </div>
                  <h1 class="hero-title">{{ item.title }}</h1>
                  <p class="hero-subtitle">{{ item.subtitle }}</p>
                </div>
              </div>
              <div class="hero-right">
                <img :src="item.image" :alt="item.title" class="hero-image" />
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 最佳热卖区域（BEST SELLER） -->
      <div class="bestseller-section">
        <div class="section-header">
          <h2 class="section-title">BEST SELLER</h2>
          <div class="category-tabs">
            <button 
              v-for="tab in categoryTabs" 
              :key="tab.key"
              :class="['tab-button', { active: activeTab === tab.key }]"
              @click="activeTab = tab.key"
            >
              {{ tab.label }}
            </button>
          </div>
        </div>

        <el-row :gutter="20" class="products-grid">
          <el-col :span="6" v-for="product in filteredProducts" :key="product.id">
            <el-card 
              :body-style="{ padding: '0' }" 
              class="product-card" 
              @click="goToProduct(product.id)"
            >
              <img :src="product.image" class="product-image" />
              <div class="product-info">
                <h4 class="product-name">{{ product.name }}</h4>
                <p class="product-price">¥{{ product.price }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </MainLayout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { productAPI } from '../api'
import MainLayout from '../layouts/MainLayout.vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 英雄区域轮播数据
const heroBanners = ref([
  {
    id: 1,
    title: '春季新品上市',
    subtitle: '发现优雅，体验时尚',
    image: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=1200'
  },
  {
    id: 2,
    title: '精选美妆',
    subtitle: '展现自然之美',
    image: 'https://images.unsplash.com/photo-1607082349566-187342175e2f?w=1200'
  },
  {
    id: 3,
    title: '时尚服饰',
    subtitle: '品味生活，彰显个性',
    image: 'https://images.unsplash.com/photo-1555529669-2269763671c0?w=1200'
  }
])

// 分类标签
const categoryTabs = [
  { label: 'ALL', key: 'all' },
  { label: 'MAKEUP', key: 'makeup' },
  { label: 'SKINCARE', key: 'skincare' }
]

const activeTab = ref('all')
const hotProducts = ref([])

const filteredProducts = computed(() => {
  if (activeTab.value === 'all') {
    return hotProducts.value
  }
  return hotProducts.value.filter(p => {
    if (activeTab.value === 'makeup') {
      return p.category === 'makeup'
    }
    if (activeTab.value === 'skincare') {
      return p.category === 'makeup' // 假设skincare也属于makeup类别
    }
    return true
  })
})

const fetchHotProducts = async () => {
  try {
    const response = await productAPI.getHotProducts()
    // 由于响应拦截器已经返回 response.data，所以直接使用
    hotProducts.value = response || []
    
    // 如果返回为空，使用模拟数据
    if (hotProducts.value.length === 0) {
      console.warn('热门商品数据为空，使用模拟数据')
      hotProducts.value = [
        { id: 1, name: '保湿面膜', price: 89, image: 'https://picsum.photos/200?random=1', category: 'makeup' },
        { id: 4, name: '春季连衣裙', price: 299, image: 'https://picsum.photos/200?random=4', category: 'clothing' },
        { id: 7, name: '蓝牙耳机', price: 399, image: 'https://picsum.photos/200?random=7', category: 'digital' },
        { id: 10, name: '电饭煲', price: 299, image: 'https://picsum.photos/200?random=10', category: 'appliance' }
      ]
    }
  } catch (error) {
    console.error('获取热门商品失败:', error)
    ElMessage.error('获取热门商品失败，请检查服务器是否运行')
    // 使用模拟数据作为降级方案
    hotProducts.value = [
      { id: 1, name: '保湿面膜', price: 89, image: 'https://picsum.photos/200?random=1', category: 'makeup' },
      { id: 4, name: '春季连衣裙', price: 299, image: 'https://picsum.photos/200?random=4', category: 'clothing' },
      { id: 7, name: '蓝牙耳机', price: 399, image: 'https://picsum.photos/200?random=7', category: 'digital' },
      { id: 10, name: '电饭煲', price: 299, image: 'https://picsum.photos/200?random=10', category: 'appliance' }
    ]
  }
}

const goToProduct = (id) => {
  router.push(`/product/${id}`)
}

onMounted(() => {
  fetchHotProducts()
})
</script>

<style scoped>
.home-content {
  width: 100%;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
}

/* 英雄区域轮播图 */
.hero-carousel-section {
  width: 100%;
  margin-bottom: 80px;
}

.hero-carousel {
  width: 100%;
}

.hero-carousel :deep(.el-carousel__arrow) {
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.hero-carousel :deep(.el-carousel__arrow:hover) {
  background-color: rgba(0, 0, 0, 0.7);
}

.hero-slide {
  display: flex;
  width: 100%;
  height: 600px;
}

.hero-left {
  flex: 1;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  position: relative;
}

.hero-content {
  max-width: 500px;
}

.decorative-lines {
  position: absolute;
  top: 40px;
  left: 60px;
  display: flex;
  gap: 10px;
}

.line {
  width: 40px;
  height: 1px;
  background: #000000;
}

.line.vertical {
  width: 1px;
  height: 40px;
  background: #000000;
}

.hero-title {
  font-size: 48px;
  font-weight: 300;
  letter-spacing: 3px;
  color: #000000;
  margin: 60px 0 20px 0;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 1px;
  color: #666666;
  margin: 0;
}

.hero-right {
  flex: 1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 最佳热卖区域 */
.bestseller-section {
  width: 100%;
  padding: 40px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.section-title {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 3px;
  color: #000000;
  margin: 0;
}

.category-tabs {
  display: flex;
  gap: 30px;
}

.tab-button {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #666666;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
}

.tab-button:hover {
  color: #000000;
}

.tab-button.active {
  color: #000000;
  font-weight: 400;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -24px;
  left: 0;
  right: 0;
  height: 1px;
  background: #000000;
}

.products-grid {
  margin-top: 40px;
}

.product-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 20px;
}

.product-card:hover {
  border-color: #000000;
}

.product-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.product-info {
  padding: 20px;
}

.product-name {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: #000000;
  margin: 0 0 10px 0;
}

.product-price {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #000000;
  margin: 0;
}
</style>
